<script setup lang="ts">
import {ref} from "vue";

const checked = ref(false)
const doSwitch = ()=>{
  checked.value = !checked.value
}
</script>

<template>
  <div class="test-wrap">
    <div class="line">=====transition======</div>
    <div class="switch-box" :class="{'is-active':checked}" @click="doSwitch">
      <div class="switch-box__text">{{checked?'on':'off'}}</div>
      <div class="switch-box__core"></div>
    </div>
    <div class="line">=====transform======</div>
    <div class="circle-box"></div>
    <div class="line">=====animation======</div>
    <div class="move-ball"></div>
  </div>

</template>

<style scoped>
@keyframes ball-move {
  0%{
    left: 0%;
    background-color: #e5edf5;
  }
  25%{
    left: 50%;
    background-color: #7bb1e8;
  }
  50%{
    left: 100%;
    background-color: #0976e5;
  }
  75%{
    left: 50%;
    background-color: #7bb1e8;
  }
  100%{
    left: 0%;
    background-color: #e5edf5;
  }
}
  .move-ball{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #409eff;
    position: relative;
    animation: ball-move 4s linear 0s infinite alternate;
  }
  .circle-box{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #67c23a;
    &:hover{
      transform: scale(2);
    }
  }
  .switch-box{
    position: relative;
    width: 88px;
    height: 40px;
    border-radius: 20px;
    background-color: #909399;
    .switch-box__core{
      position: absolute;
      top: 1px;
      left: 1px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: #ffffff;
      transition: .3s;
    }
    .switch-box__text{
      display: inline-block;
      width: 100%;
      line-height: 40px;
      font-size: 18px;
      padding: 0 0px 0 46px;
      box-sizing: border-box;
      color: #ffffff;
      font-weight: bold;
      transition: .3s;
    }
    &.is-active{
      background-color: #409eff;
      .switch-box__core{
        left: calc(100% - 39px);
      }
      .switch-box__text{
        padding: 0 0 0 8px;
      }
    }
  }
  .line{
    margin: 88px 0 18px;
    &:first-child{
      margin-top: 0;
    }
  }
  .test-wrap{
    padding: 38px 58px;
  }
</style>
